<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>电商商品展示</title>
    <!-- 添加 Bootstrap 的 CDN 链接 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="container">
        <product-list :products="products"></product-list>
    </div>

     <!-- 定义模板 -->
     <template id="product-item-template">
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">{{ product.name }}</h2>
                </div>
                <div class="panel-body">
                    <p>价格: {{ product.price }}</p>
                    <p>描述: {{ product.description }}</p>
                </div>
            </div>
        </div>
    </template>

    <template id="product-list-template">
        <div class="row">
            <h1 class="page-header">商品列表</h1>
            <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
        </div>
    </template>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 商品项组件（子组件）
        Vue.component('product-item', {
            props: ['product'],
            template: '#product-item-template'
        });

        // 商品列表组件（父组件）
        Vue.component('product-list', {
            props: ['products'],
            template: '#product-list-template'
        });

        // 根实例
        var app = new Vue({
            el: '#app',
            data: {
                products: [
                    { id: 1, name: '商品A', price: 100, description: '这是一个很棒的商品A' },
                    { id: 2, name: '商品B', price: 200, description: '这是一个很棒的商品B' },
                    { id: 3, name: '商品C', price: 300, description: '这是一个很棒的商品C' }
                ]
            }
        });
    </script>

    <!-- 定义模板 -->
    <!-- <template id="product-item-template">
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">{{ product.name }}</h2>
                </div>
                <div class="panel-body">
                    <p>价格: {{ product.price }}</p>
                    <p>描述: {{ product.description }}</p>
                </div>
            </div>
        </div>
    </template>

    <template id="product-list-template">
        <div class="row">
            <h1 class="page-header">商品列表</h1>
            <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
        </div>
    </template> -->
</body>
</html>
